<template>
  <div class="dashboard-container p-d">
    <div class="bg-f p-d">
      <div class="btnStyle flex-between m-b">
        <ButtonComp :buttonData="buttonData" />
      </div>
      <TableCompEle :tableData="tableData" :tableConfig="tableConfig" :tableAction="tableAction" :treeConfig="{ defaultExpandAll: true }"
        :isSelect="false" :rowKey="`id`">
        <template v-slot:type="scope">
          <div class="table-slot">
            <!-- <el-tag size="mini" type="info" v-if="scope.row.type == 1">
              目录
            </el-tag> -->
            <el-tag size="mini" type="success" v-if="scope.row.type == '0'">
              菜单
            </el-tag>
            <el-tag size="mini" type="warning" v-if="scope.row.type == '1'">
              按钮
            </el-tag>
          </div>
        </template>
        <template v-slot:menuIcon="scope">
          <div class="table-slot">
            <svg-icon v-if="scope.row.menuIcon" class="icon-color" :icon-class="scope.row.menuIcon" />
            <span v-else>---</span>
          </div>
        </template>
      </TableCompEle>
    </div>
    <MenuDialog ref="menuDialog" @closeDialog="closeDialog()" />
  </div>
</template>

<script>
import { allMenu, deleteFun } from "@/api/menu";
import ButtonComp from "@/views/common/buttonComp/buttonComp";
import MenuDialog from "./menuDialog.vue";
export default {
  components: {
    MenuDialog,
    ButtonComp,
  },
  data() {
    return {
      loading: false,
      queryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      buttonData: [
        {
          kind: "button",
          label: "新建菜单",
          plain: false,
          size: "mini",
          type: "primary",
          click: () => {
            let obj = {
              title: "新建菜单",
              data: {
                parentId: 0,
                menuName: "",
                menuEnName: "",
                menuOrderNum: "",
                menuRedirect: "",
                menuIcon: "",
                type: "0",
              },
            };
            this.$refs.menuDialog.show(obj);
          },
        },
      ],
      tableData: [],
      tableConfig: [
        {
          prop: "menuName",
          label: "名称",
        },
        {
          prop: "menuIcon",
          label: "图标",
          isSlot: true,
        },
        {
          prop: "type",
          label: "类型",
          isSlot: true,
        },
        {
          prop: "menuRedirect",
          label: "路由/标识",
          showHint: (row) => {
            return {
              name: row.menuRedirect || row.menuEnName,
            };
          },
        },
        {
          prop: "menuOrderNum",
          label: "排序",
        },
      ],
      tableAction: {
        align: () => "center",
        width: () => String(150),
        operations: [
          {
            label: "修改",
            isLink: true,
            type: "primary",
            method: (row) => {
              let obj = {
                title: "编辑菜单",
                isEdit: true,
                data: row,
              };
              this.$refs.menuDialog.show(obj);
            },
          },
          {
            label: "新增",
            isLink: true,
            type: "primary",
            method: (row) => {
              let obj = {
                title: "新增菜单",
                data: {
                  parentId: row.id,
                  menuName: "",
                  menuEnName: "",
                  menuOrderNum: "",
                  menuRedirect: "",
                  menuIcon: "",
                  type: "0",
                },
              };
              this.$refs.menuDialog.show(obj);
            },
          },
          {
            label: "删除",
            isLink: true,
            type: "danger",
            method: (row) => {
              this.del(row);
            },
          },
        ],
      },
      queryString: {
        name: "",
        roleId: "",
      },
    };
  },
  created() {
    this.initData();
  },
  methods: {
    closeDialog() {
      this.initData();
    },
    initData() {
      allMenu().then((response) => {
        this.tableData = response.data || [];
      });
    },
    del(row) {
      this.$confirm(`确定要删除当前菜单吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteFun({ ids: [row.id] }).then(() => {
            this.initData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>
